<template>
  <div class="directive">
    <Header></Header>
    <div class=" center-box">
      <h2>{{title}}</h2>
      <div class="d-1">
        <h3>v-if / v-else</h3>
        <div>
          <div v-if="isIf">我是看的见的IF</div>
          <div v-else>我是看不见的IF</div>
          <template v-if="isIf">
            <p> Tempalte展示</p>
          </template>
        </div>
      </div>

      <div class="d-2">
        <h3>v-show</h3>
        <div>
          <div v-show="isShow">我是看的见的Show</div>
          <div v-show="!isShow">我是看不见的Show</div>
          <template v-if="isIf">
            <p>* v-show不支持&lt;tempalte&gt;语法 </p>
          </template>
        </div>
      </div>

      <div class="d-3">
        <h3>v-model</h3>
        <div>{{data}}</div>
        <div>
          <form action="">
            <div>
              姓名：<input type="text" v-model="data.name" placeholder="请输入姓名">
            </div>
            <div>
              性别：
              <input type="radio" id="man" value="man" v-model="data.sex">
              <label for="man">男</label>
              <input type="radio" id="male" value="male" v-model="data.sex">
              <label for="male">女</label>
            </div>
            <div>
              兴趣:
              <input type="checkbox" id="jack" value="book" v-model="data.interest">
              <label for="jack"></label>
              <input type="checkbox" id="john" value="swim" v-model="data.interest">
              <label for="john"></label>
            </div>
            <div>
              身份：
              <select name="identity" id="identity" v-model="data.identity">
                <option value="teacher" selected>教师</option>
                <option value="doctor">医生</option>
                <option value="lawyer">律师</option>
              </select>
            </div>

          </form>
          <ol>
            <li>number
              <p>用户输入自动转换Number类型</p>
              <p></p>
            </li>
            <li>lazy
              <p>input事件同步输入框的值和数据</p>
              <div>
                <input v-model="lazyText" lazy> 
                {{lazyText}}s
              </div>
            </li>
            <li>debounce

              <div>
                <input v-model="debounceText" debounce='3000'> 
                {{debounceText}}
              </div>
            </li>

            <li></li>
            <li></li>
            <li></li>


          </ol>
        </div>
      </div>

      <div class="d-4">
        <h3>
        v-for
        </h3>
      </div>

      <div class="d-5">
        <h3>
        v-text

        </h3>
      </div>

      <div class="d-6">
        <h3>
        v-html
        </h3>
        
      </div>

      <div class="d-7">
        <h3>
        v-bind
        </h3>
      </div>

      <div class="d-8">
        <h3>
        v-on
        </h3>
        
      </div>

      <div class="d-9">
        <h3 ref="refbox">
        v-ref
        </h3>
        
      </div>

      <div class="d-10"  v-text-red:foo.bar="colorOne">
        <h3>
        v-el
        </h3>
      </div>

      <div class="d-11">
        <h3>
        v-pre
        </h3>
      </div>

      <div class="d-12" v-text-red="colorTwo">
        <h3>
        v-cloak
        </h3>
      </div>
    </div>
    

  </div>
</template>

<script>
import Header from "@/components/header"
export default {
  components : { Header },
  data() {
    return {
		title : 'Directive | 指令',
		isIf : true,
		isShow : true,

		lazyText :'',
		debounceText :'内容实在3000ms后改变',
		colorOne : '#e00',
		colorTwo : '#69c500',

		data :{
			sex : "",
			name : "",
			interest : [],
			identity:''
		}

    }
  },
  methods:{

  },
  // 自定义指令
  directives: {
	'text-red' : {
		bind (el,bind, vnode) {
			console.log(el);
			console.log(bind);
			console.log(vnode);
			el.style.color = bind.value;
			el.style.margin = '20px';
			console.log(bind.name);
			console.log(bind.expression);
			console.log(bind.arg);
			console.log(bind.modifiers);
			console.log(Object.keys(vnode).join(' - '));
		},
		inserted() {
			console.log('inserted');
		},
		update() {
			console.log('update');
		},
		componentUpdated() {
			console.log('componentUpdated');
		}
	}
  },
  created() {
    
    console.log(
      this.$refs.refbox
    )
  }
}
</script>

<style scoped lang="scss">
h3 {
  margin: 10px 0;
}
ul {
  list-style-type: none;
  padding: 0;
}

a {
  color: #42b983;
}
</style>
